<template>
  <transition class="slide-fade">
    <div class="list-item editingClass editing" :class="{checked: item.checked}" v-show="!item.isDelete">
        <!-- 最外层容器-->
        <label class="checkbox">
            <!--自定义的多选框-->
            <input type="checkbox" v-model="item.checked"/>
            <span class="checkbox-custom"></span>
        </label>
        <input type="text" v-model="item.content" placeholder="写点什么。。。" /><!--绑定item.text-->
        <a class="delete-item"><!--删除图标-->
            <span class="icon-trash"></span>
        </a>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    item: {

    },
    'locked': {}
  } // 子组件显式的用 props 选项声明它期待获得的数据
}
</script>

<style lang="scss" >
@import '../common/style/list-items.scss';
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-active {
  transform: translateX(10px);
  opacity: 0;
}
</style>
